<template>
	<view class="order">
		<view class="order-label">
			<view class="shop">
				<image class="shop-logo" :src="order.seller.thumb" mode=""></image>
				<view class="shop-name">
					<text class="shop-name-text">{{order.seller.seller_name}}</text>
				</view>
				<view class="go-btn">
					<uni-icons type="arrowright" :size="arrowrightAndTrashIconSize"></uni-icons>
				</view>
			</view>
			<view class="delete-btn" v-if="order.order_status==0 || order.order_status==2" @tap="orderOpTap('delete',order.order_sn)">
				<uni-icons type="trash" :size="arrowrightAndTrashIconSize"></uni-icons>
			</view>
		</view>
		<view class="order-content">
			<view v-if="productCount < 2" class="product" v-for="(product, productIndex) of order.order_goods" :key="productIndex">
				<image class="product-image" :src="product.goods_thumb" mode=""></image>
				<view class="product-title">
					<text class="product-title-text">{{product.goods_name}}</text>
				</view>
				
				<tpl-price :price="product.goods_price"></tpl-price>
			</view>
			<scroll-view v-if="productCount >= 2" class="order-content-inner" :scroll-x="true">
				<view class="product-list">
					<view class="product" v-for="(product, productIndex) of order.order_goods" :key="productIndex">
						<image class="product-image" :src="product.goods_thumb" mode=""></image>
					</view>
				</view>
			</scroll-view>
			<view v-if="productCount >= 2" class="price-wrap">
				<tpl-price :price="price"></tpl-price>
			</view>
		</view>
		<view class="service-btn-list">
			<!-- 待付款 -->
			<view class="service-btn-items" v-if="order.order_status==0 && order.pay_status==0">
				<text class="service-btn service-btn-text" @tap="orderOpTap('cancel',order.order_sn)">取消订单</text>
				<text class="service-btn service-btn-text pay-btn-text" @tap="orderOpTap('pay',order.order_sn)">去付款</text>
			</view>
			<!-- 配货中 -->
			<view class="service-btn-items" v-else-if="order.order_status==1 && order.pay_status==1 && order.shipping_status==1">
				<text class="service-btn service-btn-text" @tap="orderOpTap('remindShipping',order.order_sn)">提醒发货</text>
			</view>
			<!-- 已发货 -->
			<view class="service-btn-items" v-else-if="order.order_status==3 && order.pay_status==1 && order.shipping_status==2">
				<navigator :url="'/pages/shop/express/express?order_sn='+order.order_sn">
					<text class="service-btn service-btn-text">查看物流</text>
				</navigator>
				<text class="service-btn service-btn-text pay-btn-text" @tap="orderOpTap('finish',order.order_sn)">确认发货</text>
			</view>
			<!-- 已收货，未评价 -->
			<view class="service-btn-items" v-else-if="order.order_status==3 && order.pay_status==1 && order.shipping_status==3 && order.has_comment==0">
				<navigator :url="'/pages/shop/express/express?order_sn='+order.order_sn">
					<text class="service-btn service-btn-text">查看物流</text>
				</navigator>
				<navigator :url="'/pages/comment/comment?order_sn='+order.order_sn">
					<text class="service-btn service-btn-text">去评价</text>
				</navigator>
			</view>
			<!-- 已收货，已评价 -->
			<view class="service-btn-items" v-else-if="order.order_status==3 && order.pay_status==1 && order.shipping_status==3 && order.has_comment==1">
				<text class="service-btn service-btn-text" @tap="orderOpTap('delete',order.order_sn)">删除订单</text>
				<!-- <text class="service-btn service-btn-text">再次购买</text> -->
			</view>
			<view class="service-btn-items" v-else>
				<text class="service-btn service-btn-text" @tap="orderOpTap('delete',order.order_sn)">删除订单</text>
				<!-- 
				<navigator class="service-btn buy-again-btn" open-type="reLaunch" url="/pages/home/tab-bar?page=cart">
					<text class="service-btn-text buy-again-btn-text">再次购买</text>
				</navigator> 
				-->
			</view>
		</view>
	</view>
</template>

<script>
	import config from './tpl-order.js';
	
	export default {
		name: 'TplOrder',
		mixins: [config],
		props: {
			order:{
				type:Object,
				default:()=>{
					return {
						seller:{},
						order_goods:[]
					}
				}
			}
		},
		computed: {
			productCount() {
				return this.order.order_goods.length; 
			},
			price() {
				let price = 0;
				
				this.order.order_goods.forEach(item => {
					price += Number(item.goods_price);
				})
				
				return price;
			}
		},
		methods:{
			orderOpTap(action,order_sn){
				this.$emit("orderOpTap",{action:action,order_sn:order_sn});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		padding: $uni-spacing-row-base $uni-spacing-col-lg;
		background-color: $uni-bg-color;
	}
	.order-label {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.shop {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.shop-logo {
		width: $uni-icon-size-md;
		height: $uni-icon-size-md;
	}
	.shop-name {
		margin-left: $uni-spacing-col-base;
	}
	.shop-name-text {
		font-size: $uni-font-size-base;
	}
	.go-btn {
		margin-left: $uni-spacing-col-sm;
	}
	.delete-btn {
		background-color: $uni-bg-color-grey;
		width: $uni-icon-size-md;
		height: $uni-icon-size-md;
		border-radius: $uni-border-radius-circle;
		
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	
	
	.order-content {
		margin: $uni-spacing-row-lg 0;
		position: relative;
	}
	.order-content-inner {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}
	.product-list {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}
	.product {
		margin-left: $uni-spacing-col-sm;
		
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.product-image {
		width: 180rpx;
		height: 180rpx;
	}
	.product-title {
		flex: 1;
		margin: 0 $uni-spacing-col-base;
	}
	.product-title-text {
		font-size: $uni-font-size-base;
		
		/* #ifndef APP-PLUS-NVUE */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		/* #endif */
				
		/* #ifdef APP-PLUS-NVUE */
		text-overflow: ellipsis;
		lines: 2;
		/* #endif */
	}
	.price-wrap {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(255, 255, 255, 0.9);
		
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		
		box-shadow: -2px 0px 5px 0px $uni-bg-color-grey;
	}
	
	.service-btn-list {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}
	.service-btn-items{
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}
	.service-btn {
		margin-left: $uni-spacing-col-base;
		
		border-width: 0.5px;
		border-style: solid;
		border-color: $uni-border-color;
		border-radius: 10000px;
		
		padding: $uni-spacing-row-sm $uni-spacing-col-base;
		
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.service-btn-text {
		font-size: $uni-font-size-sm;
	}
	.buy-again-btn {
		border-color: $uni-border-color-red;
	}
	.buy-again-btn-text {
		color: $uni-text-color-red;
	}
	.pay-btn-text{
		color: $uni-text-color-red;
	}
</style>